<!-- KKFileView预览  -->
<script lang="ts" setup>
export interface FilePreviewProps {
  /**
   * 文件ID
   */
  id: string;
  name: string;
}

defineOptions({ name: 'FilePreview' });
const props = defineProps<FilePreviewProps>();

// KKVIEW 预览地址
const kkURL = computed(() => {
  const ext = props.name.replace(/.+\.(\w+)$/, (_, $1) => $1);
  // KKview原生预览？
  const isNative = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'ico', 'raw'].includes(ext);

  const href = window.location.origin + window.location.pathname;
  const path = isNative ? href : import.meta.env.VITE_KK_FILE_URL;
  // 文件下载地址
  const url = `${path}/planFilings/system/systemFile/download/${props.id
    }?fullfilename=${encodeURIComponent(`${props.id}.${ext}`)}`;

  // 按kkview规范转码
  const encodeURL = encodeURIComponent(btoa(url));
  return `${import.meta.env.VITE_KKFILEVIEW_URL}onlinePreview?url=${encodeURL}`;
});
</script>

<template>
  <iframe v-if="kkURL" class="h-100% w-100%" :src="kkURL" frameborder="0" />
</template>
